<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend API Compatibility Test</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .result { margin: 10px 0; padding: 10px; background-color: #f5f5f5; border-radius: 3px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        button { padding: 8px 16px; margin: 5px; cursor: pointer; }
        pre { background-color: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
        .status { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
        .status-ok { background: #28a745; color: white; }
        .status-fail { background: #dc3545; color: white; }
        .status-pending { background: #ffc107; color: black; }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/purl.js"></script>
    <script src="js/ohos.archinfo.js"></script>
</head>
<body>
    <h1>OHOS ArchInfo 前端API兼容性测试</h1>

    <div id="overall-status" style="margin-bottom: 20px; font-size: 18px; font-weight: bold;">
        总体状态: <span id="overall-status-text" class="status status-pending">测试中...</span>
    </div>

    <div class="test-section">
        <h2>1. JavaScript API函数测试</h2>
        <div id="api-functions-result" class="result">
            <p><strong>API前缀</strong>: <span id="api-prefix"></span></p>
            <p><strong>产品前缀</strong>: <span id="product-prefix"></span></p>
            <p><strong>所有过滤URL (modules)</strong>: <span id="modules-url"></span></p>
            <p><strong>模块详情URL</strong>: <span id="module-details-url"></span></p>
        </div>
        <button onclick="testApiFunctions()">测试API函数</button>
    </div>

    <div class="test-section">
        <h2>2. 核心API端点测试</h2>
        <button onclick="testProducts()">产品列表</button>
        <button onclick="testModules()">模块列表</button>
        <button onclick="testComponents()">组件列表</button>
        <button onclick="testProcesses()">进程列表</button>
        <button onclick="testObjects()">对象列表</button>
        <button onclick="testThreads()">线程列表</button>
        <button onclick="testSymbols()">符号列表</button>
        <button onclick="testParameters()">参数列表</button>
        <button onclick="testStartupConfigs()">启动配置列表</button>
        <div id="core-api-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>3. 详细操作API测试</h2>
        <input type="text" id="module-id" placeholder="模块ID (如: 1)" value="1" style="width: 80px; margin-right: 10px;">
        <button onclick="testModuleDetails()">模块详情</button>
        <button onclick="testModuleFields()">模块字段</button>
        <button onclick="testModuleDependencies()">模块依赖</button>
        <div id="detail-api-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>4. 页面完整性检查</h2>
        <button onclick="testPageLoading()">测试页面加载</button>
        <div id="page-loading-result" class="result"></div>
    </div>

    <script>
        let testResults = {
            products: false,
            modules: false,
            components: false,
            processes: false,
            objects: false,
            threads: false,
            symbols: false,
            parameters: false,
            startup_configs: false
        };

        function updateOverallStatus() {
            const passCount = Object.values(testResults).filter(v => v).length;
            const totalCount = Object.keys(testResults).length;
            const percentage = Math.round((passCount / totalCount) * 100);

            const statusElement = document.getElementById('overall-status-text');

            if (passCount === totalCount) {
                statusElement.textContent = `全部通过 (${passCount}/${totalCount})`;
                statusElement.className = 'status status-ok';
            } else if (passCount > 0) {
                statusElement.textContent = `部分通过 (${passCount}/${totalCount}) - ${percentage}%`;
                statusElement.className = 'status status-pending';
            } else {
                statusElement.textContent = '测试失败';
                statusElement.className = 'status status-fail';
            }
        }

        function testApiFunctions() {
            const resultDiv = document.getElementById('api-functions-result');

            document.getElementById('api-prefix').textContent = REST_API_PREFIX;
            document.getElementById('product-prefix').textContent = fnGetProductRestPrefix();
            document.getElementById('modules-url').textContent = fnGetAllItemsFilterUrl('modules');
            document.getElementById('module-details-url').textContent = fnGetModulesRestUrl('1', 'details');

            resultDiv.innerHTML += '<br><strong>✅ JavaScript函数测试通过</strong>';
        }

        function testApiCall(url, testName) {
            return new Promise((resolve) => {
                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(data) {
                        testResults[testName] = true;
                        resolve({status: 'success', data: data});
                    },
                    error: function(xhr, status, error) {
                        testResults[testName] = false;
                        resolve({status: 'error', error: error, status: xhr.status});
                    }
                });
            });
        }

        async function testProducts() {
            const result = await testApiCall('/symdb/products', 'products');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '产品列表', result);
            updateOverallStatus();
        }

        async function testModules() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('modules'), 'modules');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '模块列表', result);
            updateOverallStatus();
        }

        async function testComponents() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('components'), 'components');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '组件列表', result);
            updateOverallStatus();
        }

        async function testProcesses() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('processes'), 'processes');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '进程列表', result);
            updateOverallStatus();
        }

        async function testObjects() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('objects'), 'objects');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '对象列表', result);
            updateOverallStatus();
        }

        async function testThreads() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('threads'), 'threads');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '线程列表', result);
            updateOverallStatus();
        }

        async function testSymbols() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('symbols'), 'symbols');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '符号列表', result);
            updateOverallStatus();
        }

        async function testParameters() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('parameters'), 'parameters');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '参数列表', result);
            updateOverallStatus();
        }

        async function testStartupConfigs() {
            const result = await testApiCall(fnGetAllItemsFilterUrl('startup_configs'), 'startup_configs');
            const resultDiv = document.getElementById('core-api-result');
            appendResult(resultDiv, '启动配置列表', result);
            updateOverallStatus();
        }

        async function testModuleDetails() {
            const moduleId = document.getElementById('module-id').value || '1';
            const url = fnGetModulesRestUrl(moduleId, 'details', {format: 'json'});
            const result = await testApiCall(url, 'modules');
            const resultDiv = document.getElementById('detail-api-result');
            appendResult(resultDiv, '模块详情', result);
        }

        async function testModuleFields() {
            const moduleId = document.getElementById('module-id').value || '1';
            const url = fnGetModulesRestUrl(moduleId, 'fields', {type: 'deps', format: 'json'});
            const result = await testApiCall(url, 'modules');
            const resultDiv = document.getElementById('detail-api-result');
            appendResult(resultDiv, '模块字段', result);
        }

        async function testModuleDependencies() {
            const moduleId = document.getElementById('module-id').value || '1';
            const url = fnGetDepsRestUrl(moduleId, 'symbols');
            const result = await testApiCall(url, 'modules');
            const resultDiv = document.getElementById('detail-api-result');
            appendResult(resultDiv, '模块依赖', result);
        }

        function testPageLoading() {
            const resultDiv = document.getElementById('page-loading-result');
            const pages = [
                'index.html',
                'modules.html',
                'components.html',
                'processes.html',
                'objects.html',
                'parameters.html',
                'startup_configs.html'
            ];

            let results = [];
            let completed = 0;

            pages.forEach(page => {
                $.ajax({
                    url: '/' + page,
                    method: 'HEAD',
                    success: function() {
                        results.push(`✅ ${page}`);
                    },
                    error: function() {
                        results.push(`❌ ${page}`);
                    },
                    complete: function() {
                        completed++;
                        if (completed === pages.length) {
                            resultDiv.innerHTML = '<strong>页面加载测试结果:</strong><br>' +
                                results.join('<br>') +
                                '<br><br><small>注意: 某些页面可能需要特定参数才能正常显示</small>';
                        }
                    }
                });
            });
        }

        function appendResult(container, testName, result) {
            const status = result.status === 'success' ? '✅' : '❌';
            const info = result.status === 'success' ?
                ` (长度: ${typeof result.data === 'string' ? result.data.length : JSON.stringify(result.data).length})` :
                ` (${result.error})`;

            container.innerHTML += `${status} ${testName}${info}<br>`;
        }

        // 页面加载时自动测试API函数
        $(document).ready(function() {
            testApiFunctions();
        });
    </script>
</body>
</html>